<!-- meta tags and other links -->
<!-- Header -->
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title> Viserpet HTML Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/picture/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- Slick -->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!-- line awesome -->
    <link rel="stylesheet" href="assets/css/line-awesome.min.css">
    <!-- countdown css link-->
    <link rel="stylesheet" href="assets/css/jquery.classycountdown.min.css">
    <!-- range css -->
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <!-- magnific css link -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
    
<!--==================== Preloader Start ====================-->
<div class="preloader">
    <div class="loader-p"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Overlay Start ====================-->
<div class="body-overlay"></div>
<!--==================== Overlay End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="sidebar-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<!-- ==================== Scroll to Top End Here ==================== -->
<a class="scroll-top"><i class="fas fa-angle-double-up"></i></a>
<!-- ==================== Scroll to Top End Here ==================== -->

<!-- ==================== Header Top Start Here ==================== -->
<div class="header-top">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-between">    
            <div class="top-contact">
                <a href="index.html" class="top-contact__logo">
                    <img src="assets/picture/logo02.png" alt="logo">
                </a>
            </div>      
              <div class="d-flex flex-wrap align-items-center justify-content-center">
                   <div class="d-md-block d-none">
                    <div class="contact-list__wrapper d-flex flex-wrap justify-content-between">
                    <div class="contact-list style-two">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/phone.png" alt="">
                            </span>
                            <span class="contact-list__info"> 000 - 8888 - 9999</span>
                      </div>
                      <div class="contact-list">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/email.png" alt="">
                            </span>
                            <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="b3c5dac0d6c1c3d6c7f3d4ded2dadf9dd0dcde">[email&#160;protected]</a></span>
                    </div>
                    </div>
                   </div>
                   <div class="currency-box">
                    <select class="select">
                        <option selected="">USD</option>
                        <option value="1">EURO</option>
                        <option value="2">RUPI</option>
                        <option value="3">DINAR</option>
                    </select>
                   </div>
              </div>
           
        </div>
    </div>
</div>
<!-- ==================== Header Top End Here ==================== -->
<nav class="category-two">
    <span class="close-sidebar"><i class="las la-times"></i></span>
    <ul class="category-menu-two">
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/dog01.png" alt=""></span> Dog Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/cat.png" alt=""></span> Cat </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"> <span class="category-menu-two__thumb"><img src="assets/picture/fish.png" alt=""></span> Fish </a>
        </li>
        <li class="category-menu-two__item">                 
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/toys.png" alt=""></span> Pet toy </a>
        </li>
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/parrot.png" alt=""></span> Parrot Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/rabbit.png" alt=""></span> Rabbit </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/accessories.png" alt=""></span> Accessories </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/dog02.png" alt=""></span> Small pet </a>
        </li>
     </ul>
     <div class="contact-list__wrapper d-md-none d-block">
        <div class="contact-list">
             <span class="contact-list__icon">
                <img src="assets/picture/phone.png" alt="">
             </span>
             <span class="contact-list__info"> 000 - 8888 - 9999</span>
        </div>
        <div class="contact-list">
             <span class="contact-list__icon">
               <img src="assets/picture/email.png" alt="">
            </span>
             <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="790f100a1c0b091c0d391e14181015571a1614">[email&#160;protected]</a></span>
        </div>
     </div>
</nav>

<!-- ==================== Bottom Header End Here ==================== -->
<header class="main-header">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <button class="navbar-toggler header-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span id="hiddenNav"><i class="las la-bars"></i></span>
            </button>
            <div class="header-category-two">
                <button class="header-category-two__item">Categories <span class="header-category-two__icon"><i class="las la-bars"></i></span></button>
               
            </div>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-menu me-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Home <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                         <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index.html"> Home One </a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index-two.html"> Home Two </a></li>
                         </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Pages <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                      <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-category.html">Product category</a></li>

                      </ul>
                      </li> 
                        <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog.html">Blog</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog-details.html">Blog Details</a>
                          </li>
                        </ul>
                        </li> 
  
                    <li class="nav-item">
                      <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                    <li class=" nav-item">
                      <div class="toggle-search-box d-none d-lg-block">
                          <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                      </div>
                    </li>
                </ul>
            </div>
            <div class="header-info">
                <div class="toggle-search-box d-lg-none d-block">
                    <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                </div>
              <div class="header-info__wishlist">
                 <a href="wishlist.html" class="header-info__link"><i class="far fa-heart"></i></a>
              </div>
              <div class="header-info__cart">
                     <a href="cart.html" class="header-info__link"><i class="fas fa-shopping-cart"></i></a>
                     <span class="header-info__cart-quantity">03</span>
              </div>
              <div class="header-info__user">
                 <a href="login.html" class="header-info__link"><i class="far fa-user"></i></a>
              </div>
           </div>
        </nav>
    </div>
  </header>
  <!-- ==================== Bottom Header End Here ==================== -->
  
   <!--========================== Search Modal Start ==========================-->
   <div class="overlay-search-box position-relative">
    <div class="modal fade" id="search-box" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="search-overlay-close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="search-box">
                                    <div class="input--group">
                                        <input type="text" class="form--control style-two" placeholder="Search....">
                                        <button class="search-btn" type="submit"><i class="las la-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
  <!--========================== Search Modal End ==========================-->

<!-- ==================== Breadcumb Start Here ==================== -->
<section class="breadcumb py-120 bg-img" style="background-image: url(../static/assets/picture/breadcumb-img.png);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="breadcumb__wrapper">
                    <h1 class="breadcumb__title"> Registration</h1>
                    <ul class="breadcumb__list">
                        <li class="breadcumb__item"><a href="index.html" class="breadcumb__link"> <i class="las la-home"></i> Home</a> </li>
                        <li class="breadcumb__item"> / </li>
                        <li class="breadcumb__item"> <span class="breadcumb__item-text"> Registration </span> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==================== Breadcumb End Here ==================== -->

<section class="account py-120">
    <div class="account-inner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 d-none d-lg-block">
                    <div class="account-thumb">
                        <img src="assets/picture/login-img.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="account-form">
                        <div class="account-form__content mb-4">
                            <h3 class="account-form__title mb-2"> 注册你的账户 </h3>
                            <p class="account-form__desc">吾心吾行澄如明镜，所作所为皆为正义</p>
                        </div>
                        <form action="javascript:;" method="POST">
                            <div class="row">
                                <div class="col-sm-6">
                                     <div class="form-group">
                                        <label for="nickname" class="form--label"> 昵称</label>
                                        <input type="text" class="form--control" id="nickname" placeholder=" Name">
                                     </div>
                                </div>
                                <div class="col-sm-6">
                                     <div class="form-group">
                                        <label for="username" class="form--label">用户名</label>
                                        <input type="text" class="form--control" id="username" placeholder="User Name">
                                     </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="tel" class="form--label">电话号码</label>
                                        <input type="number" class="form--control" id="tel" placeholder="tel number">
                                     </div>
                                </div>
                                <div class="col-sm-6">
                                    <label for="your-password" class="form--label">密码</label>
                                    <div class="form-group">
                                        <input id="your-password" type="password" class="form-control form--control" value="Password">
                                        <div class="password-show-hide fas fa-eye toggle-password fa-eye-slash" id="#your-password"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label for="confirm-password" class="form--label">确认密码</label>
                                    <div class="form-group">
                                        <input id="confirm-password" type="password" class="form-control form--control" value="Confirm Password">
                                        <div class="password-show-hide fas fa-eye toggle-password fa-eye-slash" id="#confirm-password"></div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form--check form-group">
                                        <input class="form-check-input" type="checkbox" value="" id="remember">
                                        <div class="form-check-label">
                                            <label class="" for="remember"> 我同意接受许可信息,</label>
                                            <a href="#" class="text--base">服务条款</a>
                                            <label class="" for="remember"> , 隐私政策 </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                       <button type="submit" class="btn btn--base w-100">Sign Up</button>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="have-account text-center">
                                        <p class="have-account__text">Already Have An Account? <a href="login.html" class="have-account__link text--base">Login Now</a></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form[action="javascript:;"]');
        const usernameInput = document.getElementById('username');

        // 为用户名输入框添加失去焦点事件监听器
        usernameInput.addEventListener('blur', function() {
            const username = usernameInput.value.trim();

            // 验证用户名格式
            const usernamePattern = /^[a-zA-Z0-9]{6,18}$/;
            if (!usernamePattern.test(username)) {
                alert('用户名必须为6到18位的字母和数字组成！');
                return;
            }
            //密码




            // 发送异步请求检查用户名是否存在
            fetch('/check-username', { // 确保 '/check-username' 是正确的端点
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username
                })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok ' + response.statusText);
                    }
                    console.log(response);
                    //答应返回的数据

                    return response.json();
                })
                .then( data=> {
                    if (data.code===1) {
                        alert('用户名已存在，请选择其他用户名！');
                        usernameInput.value = ''; // 清空输入框
                    } else {
                        console.log('用户名可用');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('检查用户名时出错，请稍后再试！');
                });
        });

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取表单字段值
            const nickname = document.getElementById('nickname').value;
            const username = usernameInput.value;
            const tel = document.getElementById('tel').value;
            const password = document.getElementById('your-password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            const remember = document.getElementById('remember').checked;

            // 简单的验证
            if (!nickname || !username || !tel || !password || !confirmPassword) {
                alert('所有字段都是必填项！');
                return;
            }
            const passwordInput = document.getElementById('your-password');
            const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
            if (!passwordPattern.test(passwordInput.value)) {
                alert('密码必须包含至少一个数字、一个大写字母和一个小写字母，并且长度为8到20个字符！');
                return;
            }

            if (password !== confirmPassword) {
                alert('密码和确认密码不匹配！');
                return;
            }

            if (!remember) {
                alert('您必须同意服务条款和隐私政策才能继续！');
                return;
            }

            // 如果验证通过，可以在这里执行进一步的逻辑，比如发送数据到服务器
            // 例如，使用 fetch API 发送数据
            fetch('signup', { // 确保 'signup' 是正确的端点
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    nickname: nickname, // 确保 'nickname' 是服务器端期望的字段名
                    username: username,
                    tel: tel,
                    password: password,
                    remember: remember
                })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok ' + response.statusText);
                    }
                    return response.json();
                })
                .then(data => {
                    // 处理服务器响应
                    console.log(data);
                    alert('注册成功！');
                    // 重定向到登录页面
                    window.location.href = 'login.html';
                })
                .catch(error => {
                    console.error('Error:', error);
                    // 如果 error 对象有 response 属性，可以进一步处理
                    if (error.response) {
                        console.error('Error status:', error.response.status);
                        console.error('Error body:', error.response.body);
                    }
                    alert('注册失败，请稍后再试！');
                });
        });
    });
</script>


<!-- Footer -->

<!-- ==================== Footer Start Here ==================== -->
<footer class="footer-area section-bg-light bg-img">
    <div class="pb-60 pt-120">
        <div class="container">
            <div class="row justify-content-center gy-5">
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <div class="footer-item__logo">
                            <a href="index.html"> <img src="assets/picture/footer-logo02.png" alt=""></a>
                        </div>
                        <p class="footer-item__desc"> Maecenas tempus tellus eget cdimentum rhoncus sem quam semper </p>
                        <ul class="social-list">
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i
                                    class="fab fa-facebook-f"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i
                                    class="fab fa-twitter"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i
                                    class="fab fa-linkedin-in"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i
                                    class="fab fa-pinterest-p"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Pages </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="about.html" class="footer-menu__link"> About Us</a>
                            </li>
                            <li class="footer-menu__item"><a href="faq.html" class="footer-menu__link"> Faq</a></li>
                            <li class="footer-menu__item"><a href="cart.html" class="footer-menu__link">Shopping
                                Cart </a></li>
                            <li class="footer-menu__item"><a href="blog.html" class="footer-menu__link"> Blog</a></li>
                            <li class="footer-menu__item"><a href="product-two-details.html" class="footer-menu__link">
                                Product Details</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Useful link </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="product-category.html" class="footer-menu__link">
                                Product Category </a></li>
                            <li class="footer-menu__item"><a href="check-out.html"
                                                             class="footer-menu__link">Checkout </a></li>
                            <li class="footer-menu__item"><a href="login.html" class="footer-menu__link">Login </a></li>
                            <li class="footer-menu__item"><a href="" class="footer-menu__link"> Registration </a></li>
                            <li class="footer-menu__item"><a href="contact.html" class="footer-menu__link"> Contact
                                Us </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title">Subscribe now</h5>
                        <div class="subscriber-form mb-3">
                            <input type="text" class=" form--control style-two" placeholder="Email Address"
                                   aria-label="Recipient's username">
                            <button class="btn btn--base subscribe-button"><i class="fas fa-paper-plane"></i></button>
                        </div>
                          <p>Subscribe to our newsletter and get 10% off your first purchase..</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- Footer Top End-->
  
    <!-- bottom Footer -->
    <div class="bottom-footer section-bg py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bottom-footer__text">  Copyright &copy; 2023 . All rights reserved by Viserpet.</div>
                </div>
            </div>
        </div>
    </div>
  </footer>
  <!-- ==================== Footer End Here ==================== -->
  

<!-- Jquery js -->
<script data-cfasync="false" src="assets/js/email-decode.min.js"></script><script src="assets/js/jquery-3.6.1.min.js"></script>
<!-- Popper js -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- countdown js -->
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.throttle.js"></script>
<script src="assets/js/jquery.classycountdown.min.js"></script>
<!-- range js -->
<script src="assets/js/jquery-ui.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
 <!-- main js -->
 <script src="assets/js/main.js"></script>

</body>
</html>